<template>
  <div class="div-pop" v-if="isGetSkuBuy" @click="close" catchtouchmove>
    <div class="get-sku-buy" catchtap>
      <div class="flex border-b pos-rel">
        <div class="pad-t-15 pad-b-15 pad-r-8">
          <div class="img-box flex flex-center">
            <img v-if="skuImage" :src="skuImage + '?imageView2/1/w/300/h/300'" mode="aspectFill" class="img-item" @click="previewImage(skuImage)"/>
            <van-icon v-else name="photo" class="photo-default" />
          </div>
        </div>
        <div class="flex-item pad-t-15 pad-b-15">
          <div class="pad-b-7">
            <div class="font-red font-22 flex v-align-b">
              <label class="font-14 pad-b-3">¥</label>
              <!-- 商品设置会员价处理；有会员价展示权限高于普通正常价格 -->
              <label>
                {{ skuPrice > 0 ? skuPrice : goods.bestPrice }}
              </label>
            </div>
          </div>
          <div v-if="skuList.length && skuList[0].crossBorderType && skuList[0].crossBorderType === 2" class="color-crossb font-12 height-20">
            {{ comprehensiveTaxAmountTips }}
          </div>
          <div class="stock-num" v-if="goodsType === 30">
            库存{{ stockSkuNum ? stockSkuNum : goods.stock }}{{ qty }}
          </div>
          <div v-if="goodsType === 10 && skuPropList.length !== 0" class="pad-t-23"></div>
          <div class="sku-detail" v-if="skuPropList.length !== 0">
           {{ skuDetail ? skuDetail : '请选择规格' }}
          </div>
        </div>
        <div class="close-btn" @click="close">
          <img v-if="fileSpace" mode="widthFix" class="width-19 height-19" :src="fileSpace + '/images/close-icon-2.png'"/>
        </div>
      </div>
      <div>
        <scroll-view scroll-y="" class="clearfix scroll-sky">
          <div v-for="(item, index) in skuPropList" :key="index" class="pad-t-8 pad-b-8">
            <div class="font-w font-15 pad-b-7">{{ item.skuPropName }}</div>
            <div class="flex flex-wrap">
              <label v-for="(skuPropValue, indexValue) in item.skuPropValueList"
                :key="indexValue" class="sku-label-s" :class="'app-style-' + styleColor.styleType">
                <div v-if="skuPropValue.showFlag !== 2"
                  class="sku-prop-value align-c" @click="selSkuPropValue(index, skuPropValue.skuPropValueId)"
                  :style="{'background-color': skuPropValue.showFlag === 1 ? styleColor.color2 : '#f7f7f7'}"
                  :class="{'sel-prop-value' : skuPropValue.showFlag === 1, 'disable-prop-value' : skuPropValue.showFlag === 2}"                  
                  :key="indexValue">
                  {{ skuPropValue.skuPropValue }}
                </div>
                <div v-else @click="selSkuPropValue(index, skuPropValue.skuPropValueId)"
                  class="sku-prop-value align-c disable-prop-value"                  
                  :key="indexValue">
                  {{ skuPropValue.skuPropValue }}
                </div>
              </label>
            </div>
          </div>
        </scroll-view>
      </div>
      <div class="pad-t-8 pad-b-15 mar-b-10">
        <div class="font-w flex v-align-c font-15 pad-b-12">
          <span>购买数量</span>
          <!-- <span
            v-if="showLimitNum"
            class="buy-limit font-12 font-normal mar-l-13">限购 {{ goodsLimitNum }} 件</span> -->
            <div class="limit-box font-12 mar-l-4" v-if="goods.totalLimitNum">
              <span class="limit-info">
                限购{{goods.totalLimitNum}}件&nbsp;|&nbsp;还能买{{goodsLimitNum}}件
                <span class="tag"></span>
              </span>
            </div>
        </div>
        <div>
          <van-stepper v-model="goodsNum" :max="goodsLimitNum" @change="onChangeGoodsNum"/>
        </div>
      </div>
      <div class="confirm-btn">
        <div class="btn flex">
          <span v-if="!buyNowBoolean" class="flex-item"
            :style="{'background-color': styleColor.color4}" @click="save(true)">加入购物车</span>
          <span v-if="buyNowBtn" class="flex-item" :class="buyNowBoolean ? 'buy-now':''"
            :style="{'background-color': styleColor.color2, color: styleColor.styleType === 10 ? styleColor.color4 : '#fff'}"
            @click="save(false)">立即购买</span>
        </div>
      </div>
      <div class="pad-10" v-if="isIPhoneX"></div>
    </div>
  </div>
</template>

<script>
  import {
    addShoppingCart
  } from '@/api/shop'

  export default {
    data() {
      return {
        goods: {
          skuPropList: [],
          skuList: [],
          values: []
        },
        skuPropList: [],
        skuList: [],
        values: [],
        isGetSkuBuy: false,
        isComponents: true,
        isCart: true,
        isStock: true,
        selSkuPropValueList: [],
        goodsNum: 1,
        skuPrice: 0,
        skuId: '',
        skuImage: '',
        comissionFlag: null,
        stockSkuNum: 0,
        qty: '',
        skuDetail: '',
        comprehensiveTaxAmountTips: '',
        buyNowBoolean: false,
        SKUResult: {},
        buyNowBtn: true,
        skuArrStock: [],
        goodsLimitNum: null,
        showLimitNum: true,
        viewBoolean: false
      }
    },
    props: {
      goodsType: {
        type: Number,
        default: 0
      },
      goodsData: {
        type: Object,
        default: {}
      },
      skuPropList: {
        type: Array,
        default: []
      },
      skuList: {
        type: Array,
        default: []
      },
      values: {
        type: Array,
        default: []
      },
      room_id: {
        type: String,
        default: ''
      },
      styleColor: {
        type: Object,
        default: function() {
          return {}
        }
      },
      deliveryTypes: {
        type: Array,
        default: []
      }
    },
    computed: {
      isIPhoneX() {
        return this.$utils.isIPhoneX()
      }
    },
    onReady() {
    },
    onShow() {
      this.$pt.removeStorageSync('chooseLocation')
      if (this.viewBoolean) return
      this.close()
    },
    methods: {
      getObjKeys(obj) {
        if (obj !== Object(obj)) {
          return
        }
        var keys = []
        for (var key in obj) {
          // var m = key
          if (Object.prototype.hasOwnProperty.call(obj, key)) {
            // var n = key
            keys[keys.length] = key
          }
        }
        return keys
      },
      add2SKUResult(combArrItem, sku) {
        var key = combArrItem.join(',')
        key = this.arrangeKey(key)
        if (this.SKUResult[key]) { // SKU信息key属性·
          this.SKUResult[key].stock += sku.stock
        } else {
          this.SKUResult[key] = {
            stock: sku.stock,
            skuId: sku.skuId
          }
        }
      },
      arrangeKey(skuKey) {
        /* key由小到大排列*************************************/
        var skuKeyAttrs = skuKey.split(',') // SKU信息key属性值数组
        skuKeyAttrs.sort(function(value1, value2) {
          return parseInt(value1) - parseInt(value2)
        })
        skuKey = skuKeyAttrs[0]
        for (var m = 1; m < skuKeyAttrs.length; m++) {
          skuKey += ',' + skuKeyAttrs[m]
        }
        return skuKey
      },
      combInArray(aData) {
        if (!aData || !aData.length) {
          return []
        }
        var len = aData.length
        var aResult = []
        for (var n = 1; n < len; n++) {
          var aaFlags = this.getCombFlags(len, n)
          while (aaFlags.length) {
            var aFlag = aaFlags.shift()
            var aComb = []
            for (var i = 0; i < len; i++) {
              aFlag[i] && aComb.push(aData[i])
            }
            aResult.push(aComb)
          }
        }
        return aResult
      },
      getCombFlags(m, n) {
        if (!n || n < 1) {
          return []
        }
        var aResult = []
        var aFlag = []
        var bNext = true
        var i, j, iCnt1
        for (i = 0; i < m; i++) {
          aFlag[i] = i < n ? 1 : 0
        }
        aResult.push(aFlag.concat())
        while (bNext) {
          iCnt1 = 0
          for (i = 0; i < m - 1; i++) {
            if (aFlag[i] === 1 && aFlag[i + 1] === 0) {
              for (j = 0; j < i; j++) {
                aFlag[j] = j < iCnt1 ? 1 : 0
              }
              aFlag[i] = 0
              aFlag[i + 1] = 1
              var aTmp = aFlag.concat()
              aResult.push(aTmp)
              if (aTmp.slice(-n).join('').indexOf('0') === -1) {
                bNext = false
              }
              break
            }
            aFlag[i] === 1 && iCnt1++
          }
        }
        return aResult
      },
      unique(arr) {
        var hash = []
        for (var i = 0; i < arr.length; i++) {
          if (arr.indexOf(arr[i]) === i) {
            hash.push(arr[i])
          }
        }
        return hash
      },
      show(isCart, goods, comissionFlag, qty, type) {
        // 初始化data
        Object.assign(this.$data, this.$options.data())
        this.selSkuPropValueList = []
        // this.goods = {}
        if (this.goodsData) {
          this.goods = this.goodsData
          this.qty = qty
          // 多规格
          if (this.skuPropList && this.skuList) {
            // this.skuPropList = this.goodsData.skuPropList
            // this.skuList = this.goodsData.skuList
            // this.values = this.goodsData.values
            // 初始化selSkuPropValueList
            this.skuPropList.forEach((itemDetop, indexDetop) => {
              itemDetop.skuPropValueList.forEach((itemDetopSub, indexDetopSub) => {
                itemDetopSub.showFlag = 0
              })
              if (!this.selSkuPropValueList[indexDetop]) {
                this.selSkuPropValueList.push({})
              }
            })
          }
          // console.log('多规格')
          let skuArrStock = []
          let skuFirstArr = []
          skuArrStock = this.$utils.deepClone(this.skuList)
          skuArrStock.forEach((itemStock, indexStock) => {
            if (itemStock.stock) {
              this.skuArrStock.push(itemStock)
            }
          })
          if (this.skuArrStock.length) {
            Object.keys(this.values).forEach(itemValues => {
              if (this.skuArrStock[0].skuId === this.values[itemValues].skuId) {
                skuFirstArr = itemValues.split(',')
              }
            })
            // console.log(this.skuArrStock[0].skuId)
            // console.log(skuFirstArr)
            this.skuId = this.skuArrStock[0].skuId
            // console.log(this.skuArrStock[0])
            this.skuPropList.forEach((itemDetop, indexDetop) => {
              itemDetop.skuPropValueList.forEach(itemDetopSub => {
                skuFirstArr.forEach(itemArr => {
                  if (itemDetopSub.skuPropValueId === itemArr) {
                    this.selSkuPropValue(indexDetop, itemArr)
                  }
                })
              })
            })
            this.skuImage = this.skuArrStock[0].imageUrl ? this.skuArrStock[0].imageUrl : this.goods.images[0]
          } else {
            setTimeout(() => {
              this.skuOneStock()
              this.skuImage = this.goods.images[0]
              if (!this.goodsData.limitNum) {
                this.goodsLimitNum = this.goodsData.stock
              } else {
                this.goodsLimitNum = this.goodsData.limitNum
              }
            }, 50)
          }
        }
        if (type) {
          this.buyNowBoolean = true
        }
        if (this.goods.isCart) {
          this.buyNowBoolean = false
          this.buyNowBtn = false
        }
        this.isCart = isCart
        this.isGetSkuBuy = true
        this.comissionFlag = comissionFlag
        this.goodsLimitNum = null
        if (!this.goodsData.limitNum) {
          this.showLimitNum = false
          this.goodsLimitNum = this.goodsData.stock
        } else {
          this.showLimitNum = true
          this.goodsLimitNum = this.goodsData.limitNum
        }
      },
      close() {
        this.selSkuPropValueList = []
        this.goods = {}
        this.isGetSkuBuy = false
        this.$emit('close')
      },
      save(booleanVal) {
        this.isCart = booleanVal
        let roomId = this.room_id || ''
        console.log('save, shareMemberId: ' + this.goods.shareMemberId)
        if (!this.isFinishedSel()) return this.$utils.showToast({ title: '请选择商品规格' })
        if (!this.isStock) return this.$utils.showToast({ title: '您选择的商品，已售罄，请重新选择！' })
        if (this.goods.stock) {
          if (this.goodsNum > this.goods.stock) return this.$utils.showToast({ title: '您购买的商品数量，已超出库存，抱歉！' })
        }
        if (this.stockSkuNum) {
          if (this.goodsNum > this.stockSkuNum) return this.$utils.showToast({ title: '您购买的商品数量，已超出库存，抱歉！' })
        }
        let skuPropValueIds = []
        this.selSkuPropValueList.forEach((item) => {
          skuPropValueIds.push(item.skuPropValueId)
        })
        if (this.isCart) {
          const shoppingCart = {
            customerId: this.getCustomerId,
            goodsId: this.goods.goodsId,
            goodsNum: this.goodsNum,
            memberId: this.getMemberId,
            goodsType: this.goodsType,
            shoppingCartType: this.goodsType === 30 || this.goodsType === 31 || this.goodsType === 32 ? 3 : 1
          }
          if (!this.getShowBuyCard) {
            shoppingCart.customerId = this.getMemberId
          }
          if (this.goods.shareMemberId) {
            shoppingCart.shareMemberId = this.goods.shareMemberId
          }
          if (this.skuId) {
            shoppingCart.skuId = this.skuId
          }
          let that = this
          let objGoods = this.goods
          addShoppingCart(shoppingCart).then((response) => {
            if (response.isError) return
            this.$utils.showToast({ title: '已加入购物车', icon: 'success' })
            let params = {
              goodsNum: shoppingCart.goodsNum,
              goodsId: shoppingCart.goodsId,
              skuId: shoppingCart.skuId,
              bestPrice: that.skuPrice ? that.skuPrice : objGoods.bestPrice
            }
            this.$emit('finished', params)
          }).catch(() => {
          })
        } else {
          console.log('我在sku选择器:', this.room_id)
          const isCart = false
          if (this.goods.shareMemberId) {
            this.$pt.navigateTo({
              url: '/pages/shop/buy/main?goodsId=' + this.goods.goodsId + '&skuId=' +
                this.skuId + '&goodsNum=' + this.goodsNum + '&goodsType=' + this.goodsType + '&shareMemberId=' + this.goods.shareMemberId +
                 '&comissionFlag=' + this.comissionFlag + '&room_id=' + roomId + '&isCart=' + isCart
            })
          } else {
            this.$pt.navigateTo({
              url: `/pages/shop/buy/main?goodsId=${this.goods.goodsId}&skuId=${this.skuId}&goodsNum=${this.goodsNum}&goodsType=${this.goodsType}
              &comissionFlag=${this.comissionFlag}&room_id=${roomId}&isCart=${isCart}`
            })
          }
        }
        this.close()
        this.isGetSkuBuy = false
      },
      previewImage(current) {
        this.$pt.setStorageSync('chooseLocation', true)
        this.$pt.previewImage({
          urls: [current],
          current: current,
          success: res => {
            this.viewBoolean = true
          }
        })
      },
      selSkuPropValue(skuPropIndex, skuPropValueId) {
        // var data = {'小;白;高': {'count': 40}, '大;白;高': {'count': 20}, '小;黑;高': {'count': 0}, '大;黑;高': {'count': 10}}
        var i = null
        var j = null
        // console.log(this.values)
        var skuKeys = this.getObjKeys(this.values)
        // console.log('skuKeys', skuKeys)
        // console.log('skuKeys')
        // console.log(skuKeys)
        for (i = 0; i < skuKeys.length; i++) {
          var skuKey = skuKeys[i] // 一条SKU信息key
          var sku = this.values[skuKey] // 一条SKU信息value
          var skuKeyAttrs = skuKey.split(',') // SKU信息key属性值数组
          skuKeyAttrs.sort(function(value1, value2) {
            return parseInt(value1) - parseInt(value2)
          })
          // 对每个SKU信息key属性值进行拆分组合
          var combArr = this.combInArray(skuKeyAttrs)
          for (j = 0; j < combArr.length; j++) {
            this.add2SKUResult(combArr[j], sku)
          }
          this.SKUResult[skuKeyAttrs.join(',')] = {
            stock: sku.stock,
            skuId: sku.skuId
          }
        }
        let dataList = []
        const colArr = ['subData', 'name']
        dataList = this.$utils.objToArr(this.SKUResult, colArr)
        let showId = ''
        // 拷贝属性，使其更新
        this.selSkuPropValueList = Object.assign([], this.selSkuPropValueList)
        // console.log('this.selSkuPropValueList')
        // console.log(this.selSkuPropValueList) // 已选中数组
        this.skuPropList.forEach((item, index) => {
          if (!this.selSkuPropValueList[index]) {
            this.selSkuPropValueList.push({})
          }
          if (skuPropIndex === index) {
            if (this.selSkuPropValueList[index].skuPropValueId === skuPropValueId) {
              item.skuPropValueList.forEach(itemSub => {
                itemSub.showFlag = 0
              })
              this.selSkuPropValueList[index].skuPropValueId = ''
            } else {
              this.selSkuPropValueList[index].skuPropValueId = skuPropValueId
              item.skuPropValueList.forEach(itemSub => {
                itemSub.showFlag = 0
                if (this.selSkuPropValueList[index].skuPropValueId === itemSub.skuPropValueId) {
                  showId = itemSub.skuPropValueId
                  itemSub.showFlag = 1
                  // sku展示库存为0的灰度展示
                  // itemSub.skuPropValueId 为 选中的valueId，在 skuPropList 里
                  this.skuPropList.forEach(itemOnTop => {
                    itemOnTop.skuPropValueList.forEach(itemOtherOnSub => {
                      if (itemOtherOnSub.showFlag === 2) {
                        itemOtherOnSub.showFlag = 0
                      }
                    })
                  })
                  // console.log('itemData')
                  dataList.forEach(itemData => {
                    let len = 0
                    if (itemData.name.indexOf(',') !== -1) {
                      len = (itemData.name.split(',')).length
                      itemData.len = len
                    } else {
                      itemData.len = 1
                    }
                  })
                }
              })
            }
          }
        })
        // 已选中的数据处理
        let selDataArr = [] // 已选中数组
        let selDataStr = '' // 已选中字符串
        let stockNoneValueId = [] // 库存为空相关联的ID值
        let stockNoneArrId = [] // 库存为空相关联的ID值
        this.selSkuPropValueList.forEach(item => {
          if (item.skuPropValueId) {
            selDataArr.push(item.skuPropValueId)
          }
        })
        selDataStr = selDataArr.join(',')
        dataList.forEach(item => {
          if (selDataStr !== item.name && item.name.indexOf(selDataStr) !== -1 && item.subData.stock === 0) {
            stockNoneValueId.push(item.name.split(','))
            stockNoneValueId = [].concat.apply([], stockNoneValueId)
          }
          if (item.subData.stock === 0) {
            stockNoneArrId.push(item.name.split(','))
            stockNoneArrId = [].concat.apply([], stockNoneArrId)
          }
        })
        if (stockNoneValueId.length === 0) {
        } else {
          if (selDataArr.length === 0) {
            this.skuPropList.forEach(itemProp => {
              itemProp.skuPropValueList.forEach(itemPropSub => {
                this.skuDetail = ''
                this.comprehensiveTaxAmountTips = ''
                this.skuPrice = this.goods.bestPrice
                this.stockSkuNum = this.goods.stock
                this.skuImage = this.goods.images[0]
              })
            })
          }
        }
        // 读取sku价格
        if (this.isFinishedSel()) {
          this.skuList.forEach((item) => {
            let isGetSkuPrice = true
            item.skuDetailList.forEach((skuDetail, index) => {
              if (skuDetail.skuPropValueId !== this.selSkuPropValueList[index].skuPropValueId) {
                isGetSkuPrice = false
              }
            })
            if (isGetSkuPrice) {
              this.skuPrice = item.bestPrice
              this.skuId = item.skuId
              this.stockSkuNum = item.stock
              if (!this.goodsData.limitNum) {
                this.goodsLimitNum = this.goodsData.stock
              } else {
                this.goodsLimitNum = this.goodsData.limitNum
              }
              let arrDetail = item.skuDetail.split(';')
              this.skuDetail = arrDetail.join(' ')
              this.comprehensiveTaxAmountTips = item.comprehensiveTaxAmountTips
              if (item.imageUrl) {
                this.skuImage = item.imageUrl ? item.imageUrl : this.goods.images[0]
              }
              this.skuPropList.forEach((itemList, index) => {
                itemList.skuPropValueList.forEach(itemSub => {
                  if (this.selSkuPropValueList[index].skuPropValueId === itemSub.skuPropValueId) {
                    itemSub.showFlag = 1
                  }
                })
              })
              if (item.stock === 0) {
                // console.log('showId')
                // console.log(showId)
                this.skuPropList.forEach(itemList => {
                  itemList.skuPropValueList.forEach(itemSub => {
                    if (showId === itemSub.skuPropValueId) {
                      itemSub.showFlag = 1
                    }
                    if (itemSub.showFlag === 1) {
                      itemSub.showFlag = 2
                    }
                  })
                })
                this.stockSkuNum = '0'
                this.isStock = false
                // this.$utils.showToast({ title: '您选择的商品，已售罄，请重新选择！' })
              } else {
                this.isStock = true
              }
            }
          })
          this.skuOneStock()
        }
        // console.log('dataList', dataList)
        let stockNoneArrAll = []
        let stockNoneQueAllData = []
        stockNoneArrAll = this.getWordCnt(stockNoneArrId)
        Object.keys(stockNoneArrAll).forEach(key => {
          if (stockNoneArrAll[key] >= this.skuPropList.length) {
            stockNoneQueAllData.push(key)
          }
        })
        this.skuNoneStock(stockNoneQueAllData)
        this.skuSelDetail(selDataArr)
      },
      getWordCnt(arrData) {
        var obj = {}
        for (var i = 0, l = arrData.length; i < l; i++) {
          var item = arrData[i]
          obj[item] = (obj[item] + 1) || 1
        }
        return obj
      },
      skuSelDetail(arrData) {
        let skuDetail = []
        this.skuPropList.forEach(itemList => {
          itemList.skuPropValueList.forEach(itemSub => {
            arrData.forEach(itemArr => {
              if (itemArr === itemSub.skuPropValueId) {
                skuDetail.push(itemList.skuPropName + ':' + itemSub.skuPropValue)
              }
            })
          })
        })
        this.skuDetail = skuDetail.join(' ')
      },
      skuNoneStock(arrData) {
        this.skuPropList.forEach(itemList => {
          itemList.skuPropValueList.forEach(itemSub => {
            arrData.forEach(itemArr => {
              if (itemArr === itemSub.skuPropValueId) {
                itemSub.showFlag = 2
              }
            })
          })
        })
      },
      skuOneStock() {
        if (this.skuPropList.length === 1) {
          this.skuList.forEach((item) => {
            if (item.stock === 0) {
              this.skuPropList.forEach(itemList => {
                itemList.skuPropValueList.forEach(itemSub => {
                  if (item.skuDetailList[0].skuPropValueId === itemSub.skuPropValueId) {
                    itemSub.showFlag = 2
                  }
                })
              })
            }
          })
        }
      },
      // 是否完成了选择规格
      isFinishedSel() {
        let isDone = true
        this.selSkuPropValueList.forEach((item) => {
          // console.log('item.skuPropValueId')
          // console.log(item.skuPropValueId)
          if (!item.skuPropValueId) {
            isDone = false
            return isDone
          }
        })
        return isDone
      },
      onChangeGoodsNum(e) {
        console.log(e)
        this.goodsNum = e.mp.detail
      }
    }
  }
</script>

<style scoped lang="less">
.color-crossb{
  color: #ff4b2d;
}
.get-sku-buy {
  width: 375px;
  box-sizing: border-box;
  padding: 0 20px;
  background-color: #fff;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
  position: fixed;
  bottom: 0;
  left: 0;
  z-index: 990;
  .sku-label-s {
    &.app-style-11,
    &.app-style-12,
    &.app-style-13,
    &.app-style-14,
    &.app-style-15 {
      .sku-prop-value {
        color: #333;
        &.sel-prop-value {
          color: #fff;
        }
      }
    }
  }
  .close-btn {
    position: absolute;
    width: 36px;
    height: 36px;
    right: -8px;
    top: 9px;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .border-b {
    border-bottom: #f7f7f7 1px solid;
  }
  .scroll-sky {
    max-height: 275px;
  }
  .stock-num {
    font-size: 12px;
    color: #949494;
  }
  .sku-detail {
    font-size: 12px;
    padding-top: 1px;
    color: #949494;
  }
}

.buy-limit{
  color: #ff3636;
}

.img-box{
  width: 100px;
  height: 100px;
  background: #f7f8fa;
  .photo-default{
    font-size: 30px;
    color: #dcdee0;
  }
}

.img-item {
  width: 100px;
  height: 100px;
}

.goods-title {
  height: 50px;
  overflow: hidden;
}

.confirm-btn {
  color: #fff;
  padding: 10px 0;
  text-align: center;
  .btn {
    overflow: hidden;
    border-radius: 100px;
    .flex-item {
      display: inline-block;
      height: 42px;
      line-height: 42px;
      font-size: 15px;
      // color: #333333;
      background: #ffe200;
      cursor: pointer;
      .self-shop {
        font-size: 8px;
        span {
          color: #ff001d;
        }
      }
      &.buy-now {
        color: #333333 !important;
        background: #ffe200 !important;
      }
      &:last-child {
        line-height: unset;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
      }
      &:first-child {
        background: #333333;
        color: #fff;
      }
    }
  }
}

.sku-prop-value {
  background-color: #f2f2f2;
  padding: 4px 13px;
  border-radius: 100px;
  margin-right: 15px;
  margin-top: 5px;
  min-width: 30px;
  color: #333333;
}

.sel-prop-value {
  background-color: #ffd005;
}
.disable-prop-value {
  color: #d2d2d2;
  background-color: #f7f7f7;
  opacity: 0.5;
}
.line-h-1 {
  line-height: 1;
}
.limit-box {
  color: #00AA6B;
  .limit-info {
    background: #E5F7F1;
    border: 1px solid #CEEDE3;
    border-radius: 5px;
    padding-left: 3px;
    padding-right: 4px;
    padding-top: 2px;
    padding-bottom: 2px;
    position: relative;
    .tag {
      position: absolute;
      bottom: -4px;
      left: 14px;
      display: inline-block;
      width: 0;
      height: 0;
      border-top: 4px solid #E5F7F1;
      border-left: 6px solid transparent;
      border-right: 6px solid transparent;
    }
  }
}
</style>
